<!DOCTYPE HTML>
<html>

<head>
    <title> 商品规格</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css"/>
    <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
    <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="container">
        <div class="detail-page">
            <div class="span24">
                <h3>商品规格<button type="button" id="add-product-size-btn" class="pull-right button button-default">添加商品规格</button></h3>
                <hr>
            </div>
            <div class="detail-section">
                <div class=" detail-row">
                    <div class="span24">
                        <div class="well">
                            <div class="row">
                                <form id="searchForm" class="form-horizontal">
                                    <div class="control-group span6">
                                        <label class="control-label first">性别：</label>
                                        <div class="controls">
                                            <input type="text" class="input-small control-text" name="id">
                                        </div>
                                    </div>
                                    <div class="control-group span6">
                                        <label class="control-label">尺码类型：</label>
                                        <div class="controls">
                                            <select class="input-small" name="" id="">
                                                <option value="">全部</option>
                                                <option value="">鞋码</option>
                                                <option value="">衣码</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group span6">
                                        <label class="control-label">尺码标准：</label>
                                        <div class="controls">
                                            <select class="input-small" name="" id="">
                                                <option value="">全部</option>
                                                <option value="">US</option>
                                                <option value="">UK</option>
                                                <option value="">标准码</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="control-group  span3 ">
                                        <div class="controls">
                                            <button type="button" id="btnSearch" class="button button-primary">搜索</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="span24">
                        <!-- 表格 start-->
                        <div id="grid"></div>
                        <!-- 表格 end-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 初始隐藏 dialog内容 -->
    <div id="content" class="hide">
        <form class="form-horizontal">
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">
                        <s>*</s>尺码类型：</label>
                    <div class="controls">
                        <select name="d" data-rules="{required:true}" class="input-normal">
                            <option value="">请选择</option>
                            <option value="1">鞋码</option>
                            <option value="2">衣码</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">
                        <s>*</s>尺码标准：</label>
                    <div class="controls">
                        <select name="e" data-rules="{required:true}" id="" class="input-normal">
                            <option value="">请选择</option>
                            <option value="2">US</option>
                            <option value="1">UK</option>
                            <option value="3">标准码</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">
                        <s>*</s>尺码性别:</label>
                    <div class="controls" style="padding-top: 7px">
                        <label>
                            <input id="" name="c" type="radio" value="1">男款</label>
                        <label>
                            <input id="" name="c" type="radio" value="2">女款</label>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">
                        <s>*</s>序号：</label>
                    <div class="controls">
                        <input name="a" type="text" data-rules="{required:true,number : true}" class="control-text">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="control-group span12">
                    <label class="control-label">
                        <s>*</s>尺码值：</label>
                    <div class="controls">
                        <input type="text"  data-rules="{required:true}" class="control-text" name="b">
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
    <script type="text/javascript" src="../../../assets/js/config-min.js"></script>
    <script type="text/javascript">
    BUI.use('common/page');
    </script>
    <!-- script start -->
    <script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data'], function(Grid, Data) {
        var Grid = Grid,
            Store = Data.Store,
            enumObj = {
                "1": "鞋码",
                "2": "衣码"
            },
            enumsexObj = {
                "1": "男款",
                "2": "女款"
            },
            enumsizeObj = {
                "1": "UK",
                "2": "US",
                "3":"标准码"
            },
            columns = [{
                title: '排序',
                dataIndex: 'a',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '尺码名称 ',
                elCls: 'center',
                dataIndex: 'b',
                width: 100
            }, {
                title: '性别',
                elCls: 'center',
                dataIndex: 'c',
                width: 200,
                renderer: Grid.Format.enumRenderer(enumsexObj)
            }, {
                id: '123',
                title: '尺码类型 ',
                elCls: 'center',
                dataIndex: 'd',
                width: 100,
                renderer: Grid.Format.enumRenderer(enumObj)
            }, {
                title: '尺码标准',
                elCls: 'center',
                dataIndex: 'e',
                width: 200,
                renderer: Grid.Format.enumRenderer(enumsizeObj)
            }, {
                title: '操作',
                dataIndex: 'f',
                elCls: 'center',
                width: 200,
                renderer: function(value, obj) {
                    return '<span class="grid-command btn-edit"><i class="icon icon-edit"></i>[ 编辑 ]</span><span class="grid-command btn-del"><i class="icon icon-trash"></i> [ 删除 ]</span>'
                }
            }],
            data = [{
                id: '1222',
                a: '034',
                b: '5.5',
                c: '1',
                d: '1',
                e: '2'
            }, {
                id: '1222',
                a: '034',
                b: '5.5',
                c: '2',
                d: '2',
                e: '1'
            }, ];
        //初始化数据
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'btn-edit', //触发显示Dialog的样式
                editor: {
                    title: '编辑商品规格'
                }
                /*  ,  editor: {
                        title: '自定义',
                        width: 600,
                        listeners: {
                            show: function() {
                                var form = this.get('form');
                                if (!isAddRemote) {
                                    var bField = form.getField('b');
                                    bField.set('remote', {
                                        url: '../../../form/data/remote.php',
                                        dataType: 'json', //默认为字符串
                                        callback: function(data) {
                                            if (data.success) {
                                                return '';
                                            } else {
                                                return data.msg;
                                            }
                                        }
                                    });
                                    isAddRemote = true;
                                }
                                //TO DO 
                            }
                        }
                    }*/
            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层
                forceFit: true,
                // 底部工具栏
                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [editing], //插件
                store: store
            });

        grid.render();
        //点击操作
        grid.on('itemclick', function(ev) {
            var sender = $(ev.domTarget),
                itemEl = $(ev.element),
                item = ev.item;

            if (sender.hasClass('btn-del')) { //点击删除操作
                delFunction(item, itemEl);

            } else if (sender.hasClass('btn-add')) { //点击编辑操作
                addFunction(item, itemEl);
            }

        });
         $("#add-product-size-btn").click(function() {
            addFunction();
        });
        //添加记录
        function addFunction() {
            var newData = {};
            editing.add(newData, 'a'); //添加记录后，直接编辑
        }
        //删除选中的记录
        function delFunction(item, itemEl) {
            BUI.Message.Confirm('确认删除记录？', function() {
                var input = itemEl.find('input'),
                    name = itemEl.attr('name');
                if (name) {
                    form.getField(name).remove();
                }

                store.remove(item);
            }, 'question');
        }
    });
    </script>
    <!-- script end -->

    <body>

</html>
